<template>
  <div class="root">
    <!-- <div id="chart1"></div> -->
		<div class="chart">
			<img src="http://qnkf.laigl.com/20210420/chart3.png" alt="">
		</div>
		<div class="text">
			<div class="title">解决方法：</div>
			<div v-for="(item,index) in str">
				<!-- <span>{{item.solution}}</span> -->
				<div v-html="item"></div>
			</div>
		</div>
		<div class="btns">
			<div class="quit" @click="quit">退出</div>
			<div class="next" @click="next">运动处方</div>
		</div>
  </div>
</template>
<script>
import { Notify } from 'Vant'
export default {
  data () {
    return {
			solutions: [],
			str:[]
    }
  },
	created() {
		this.getSolution()
	},
	methods:{
		showHtml(str) {
			return str
			.replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
			.replace(/&amp;nbsp;/g,"")
			.replace(/&lt;/g,"<")
			.replace(/&gt;/g,">")
			.replace(/&quot;/g,"\"")
			.replace(/&#39;/g, "\'")
		},
		quit(){
			this.$router.push('./solution')
		},
		next(){
			this.$router.push('./level?assess_id='+this.$route.query.id)
		},
		getSolution(){
			var _this = this
			let openid = localStorage.getItem('openid')
			let in_id = localStorage.getItem('cantaction')
			_this.$axios.post('assessment/list_solution',{openid,in_id})
			.then(res=>{
				if(res.data.code==2000){
					_this.solutions = res.data.data
					// Notify({type:'success',message:res.data.data[0].solution})
					// console.log(this.solutions)
					for(var index in _this.solutions){
						_this.str = _this.str.concat(_this.showHtml(_this.solutions[index].solution))
					}
					console.log(_this.str)
					console.log(_this.showHtml(_this.solutions[0].solution))
				}else{
					Notify({type:'danger',message:res.data.msg})
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
  /* #chart1 {
    width: 25rem;
    height: 22rem;
  } */
	.root{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		box-sizing: border-box;
		.chart{
			width: 100vw;
			height: 19rem;
			box-sizing: border-box;
			padding: 10px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			margin-top: 1.5rem;
			width: 90vw;
			margin-left: 5vw;
			.title{
				font-size: 1.1rem;
				font-weight: bold;
				margin-bottom: 1rem;
			}
			p{
				line-height: 2rem;
			}
		}
		.btns{
			display: flex;
			margin-top: 2rem;
			margin-bottom: 4rem;
			justify-content: space-around;
		}
		.quit{
			width: 9rem;
			height: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.1rem;
			border: .15rem solid #666;
			border-radius: 3rem;
		}
		.next{
			width: 9.2rem;
			height: 3.3rem;
			display: flex;
			color: #fff;
			justify-content: center;
			align-items: center;
			font-size: 1.1rem;
			border-radius: 3rem;
			background: linear-gradient(to right,#1DC5D1,#0589C5);
		}
	}
</style>